<template>
	<view class="menu" @click="countdown">
		<view class="status_bar_h" :style="{
				height: `${statusBarHeight}px`,
				backgroundColor: '#20BF6C',
			}"></view>
		<view class="img_box">
			<!-- <swiper
				style="height: 400rpx"
				circular
				:indicator-dots="false"
				:autoplay="true"
				:interval="2000"
				:duration="500">
				<swiper-item
					v-for="(item, key) in src"
					:key="key">
					<view class=""
						><image
							style="width: 100%; height: 400rpx"
							mode="aspectFill"
							:src="item"></image
					></view>
				</swiper-item>
			</swiper> -->
			<image style="width: 100%; height: 400rpx" mode="aspectFill" :src="src">
			</image>

			<view class="back" @click="back">
				<image src="/static/images/arrow-left.png" mode="widthFix"></image>
				<text>返回</text>
			</view>
		</view>
		<view class="main">
			<!-- <view class="">设备ID：{{ emId }}</view> -->
			<view class="title">ONE桌遊自助繳費系統</view>
			<view class="sd_title">開啟one桌遊APP進行掃碼登入</view>

			<view class="scan_img">
				<up-image width="160rpx" height="160rpx" :src="scanCodeImg" mode="widthFix"
					:lazy-load="true"></up-image>
				<view v-if="showMask" class="mask" @click="refresh">
					<image :class="{active:refreshFlag}" src="/static/images/menu/shuaxin1.png" mode="widthFix"></image>
				</view>
				<view v-if="scanning" class="mask">
					<!-- <image :class="{active:refreshFlag}" src="/static/images/menu/shuaxin1.png" mode="widthFix"></image> -->
					掃碼中...
				</view>
			</view>

			<view class="footer">
				<up-button @click="handPhone" class="btnpho">手機登入</up-button>
				<up-button @click="handregister" class="btnpho">註冊</up-button>
			</view>
			<!-- <view class="form">
				<view class="user_name">
					<up-input v-model="form.user_name" type="number" color="#39B19D" shape="circle"
						@change="inputChange" :customStyle="{
							border: '2rpx solid #39B19D!important',
						}" placeholder="请输入10位有效手机号">
						<template #prefix>
							<up-text text="+886" color="#39B19D"></up-text>
						</template>
					</up-input>
				</view>
				<view class="user_pass">
					<up-input v-model="form.user_pass" type="number" color="#39B19D" shape="circle"
						@change="inputChange" :customStyle="{
							border: '2rpx solid #39B19D!important',
						}" placeholder="请输入手机验证码">
						<template #suffix>
							<up-code ref="uCodeRef" seconds="20" changeText="请60秒之后重新获取"></up-code>
							<up-button @tap="getCode" text="获取验证码" color="#39B19D" size="mini"></up-button>
						</template>
					</up-input>
				</view>
				<text class="checkout_btn" @click="jump('passLogin')">切换密码登录</text>
			</view> -->
			<!-- <view class="btn_wrap">
				<view class="btn_box" @click="submit">确定登录
				</view>
				<view class="btn_box" @click="jump('scanCode')">扫码登录</view>
				<view class="btn_box" @click="jump('register')">注册</view>
			</view> -->
			<!-- <view class="deal">
				<checkbox-group>
					<label>
						<checkbox color="#39B19D" outline="#39B19D" class="deal_check" :checked="isChecked" />
						<text class="text">我已阅读并同意《登录协议》《隐私协议》</text>
					</label>
				</checkbox-group>
			</view> -->
		</view>
	</view>
</template>

<script>
	// 引入调试组件
	// import Vconsole from 'vconsole';
	import useStore from '@/store/index.js';
	import baseURL from '@/utils/baseURL.js';
	// import {
	// 	countDate
	// } from '@/utils/timeoutToIndex';
	export default {
		data() {
			return {
				src: [],
				baseURL,
				isChecked: false,
				form: {},
				statusBarHeight: 0, // 顶部状态栏高度
				bthHeight: 0, // 底部按钮高度
				list: [],
				scrollTop: 0,
				old: {
					scrollTop: 0,
				},
				emId: 0,
				timer: null,
				scanCodeImg: '',
				refreshFlag: false,
				showMask: false,
				scanning: false,
			};
		},

		onLoad() {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// const screenTop = uni.getSystemInfoSync().safeArea.top;
			// const screenBot = uni.getSystemInfoSync().safeArea.bottom;
			this.bthHeight = uni.getSystemInfoSync().screenHeight - (1000 - 40) / 2;
			// console.log('uni.getSystemInfoSync()', uni.getSystemInfoSync());
			// console.log('this.bthHeight', this.bthHeight);
			// console.log('screenTop', screenTop);
			// console.log('screenBot', screenBot);
			// const token = JSON.parse(uni.getStorageSync('token'))
			// 	? JSON.parse(uni.getStorageSync('token'))
			// 	: ''; // 1 店家 2商家
			// if (!token) {
			// 	uni.navigateTo({
			// 		url: '/pages/login/login',
			// 	});
			// } else {
			// }
			this.setSwiperImg();
			this.getShebeiId();
			this.countdown();
		},
		onUnload() {
			clearInterval(this.codeTimer);
		},
		onShow() {
			// this.countdown();
			this.getCode();
			// clearTimeout(time)
			// let time = setTimeout(() => {
			// 	this.showMask = true
			// }, 1000 * 60 * 3)
		},

		methods: {
			countdown() {},
			setSwiperImg() {
				const equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				// console.log('equipmentOptions', equipmentOptions.imagejh);
				// const _src = equipmentOptions.imagejh ?
				// 	equipmentOptions.imagejh.split(',') : [];
				// if (_src.length > 1) {
				// 	this.src = _src.map(item => baseURL + item);
				// } else if (_src.length === 1) {
				// 	this.src = [baseURL + _src[0]];
				// }
				this.src = baseURL + equipmentOptions.image2
			},
			submit() {
				if (this.isChecked) {
					if (this.checkForm()) {
						const params = {
							user_name: this.form.user_name,
							user_pass: this.form.user_pass,
						};
						uni.request({
							url: baseURL + '/api/login/loginMobile',
							method: 'POST',
							data: {
								...params,
							},
							header: {
								'Content-Type': 'application/x-www-form-urlencoded',
							},
							success: res => {
								if (res.data.code == 0) {
									uni.showToast({
										title: res.data.msg,
										icon: 'none',
										duration: 2000,
									});
								} else {
									// 登录返回的data所有的值，除了上面的其他的从这里取值
									uni.setStorageSync(
										'userOptions',
										JSON.stringify(res.data.data)
									);
									uni.navigateTo({
										url: '/pages/shop/shop',
									});
								}
							},
							fail: res => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none',
								});
							},
						});
					} else {
						uni.showModal({
							title: '系統提示',
							content: '請檢查是否填寫',
						});
					}
				} else {
					uni.showToast({
						title: '请勾选协议',
						duration: 1000,
					});
				}
			},
			// getCode() {
			// 	const params = {
			// 		code_type: 'login',
			// 		mobile: this.form.user_name
			// 	};
			// 	uni.request({
			// 		url: baseURL + '/api/login/code',
			// 		method: 'POST',
			// 		data: {
			// 			...params,
			// 		},
			// 		header: {
			// 			'Content-Type': 'application/x-www-form-urlencoded',
			// 		},
			// 		success: res => {
			// 			if (res.data.code == 0) {
			// 				uni.showToast({
			// 					title: res.data.msg,
			// 					icon: 'none',
			// 					duration: 2000,
			// 				});
			// 			}
			// 		},
			// 		fail: res => {
			// 			uni.showToast({
			// 				title: res.data.msg,
			// 				icon: 'none',
			// 			});
			// 		},
			// 	});
			// },
			getShebeiId() {
				uni.getSystemInfo({
					success: res => {
						this.emId = res.deviceId;
					},
				});
			},
			checkForm() {
				const {
					user_name,
					user_pass
				} = this.form;
				return user_name && user_pass ? true : false;
			},
			jump(data) {
				let url = '';
				switch (data) {
					case 'register':
						url = '/pages/register/register';
						break;
					case 'passLogin':
						url = '/pages/login/login';
						break;
					case 'scanCode':
						url = '/pages/scanCode/scanCode';
						break;
					default:
				}
				uni.navigateTo({
					url,
				});
			},
			inputChange(e) {},
			getCode() {
				// 获取二维码
				const _equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);

				uni.request({
					url: baseURL + '/api/index/qrcode',
					data: {
						equipmentID: _equipmentOptions.equipmentID,
					},
					header: {
						Accept: 'application/json',
						'Content-Type': 'application/json',
						'X-Requested-With': 'XMLHttpRequest',
					},
					method: 'POST',
					responseType: 'arraybuffer',
					success: res => {
						// console.log(res.data, '二維碼')

						// #ifdef H5
						this.scanCodeImg =
							'data:image/png;base64,' +
							window.btoa(
								new Uint8Array(res.data).reduce(
									(data, byte) => data + String.fromCharCode(byte),
									''
								)
							);
						// #endif

						// #ifdef APP-PLUS
						this.scanCodeImg =
							'data:image/png;base64,' +
							btoa(
								new Uint8Array(res.data).reduce(
									(data, byte) => data + String.fromCharCode(byte),
									''
								)
							);
						// #endif



						this.refreshFlag = false
						// console.log(123456);
						// console.log(this.scanCodeImg)
						this.getLoginState();
					},
					fail: error => {},
				});
			},
			getLoginState() {
				clearInterval(this.codeTimer);
				const _equipmentOptions = JSON.parse(
					uni.getStorageSync('equipmentOptions')
				);
				this.codeTimer = setInterval(() => {
					uni.request({
						url: baseURL + '/api/index/getLoginStatus',
						data: {
							equipmentID: _equipmentOptions.equipmentID,
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						},
						method: 'POST',
						responseType: 'text',
						success: res => {
							// console.log('登录状态', res.data.data);
							if (res.data.data.status === 1) {
								this.isMaskShow = false;
							}
							if (res.data.data.status === 2) {
								this.scanning = true
								this.isMaskShow = true;
							}
							if (res.data.data.status === 3) {
								clearInterval(this.codeTimer);
								uni.setStorageSync('userOptions', JSON.stringify(res.data.data));
								uni.showToast({
									title: '登入成功',
									icon: 'success',
									duration: 2000
								})
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/shop/shop',
									});
								}, 2000)
							}
							if (res.data.data.status === 4) {
								clearInterval(this.codeTimer);
								uni.reLaunch({
									url: '/pages/scanCode/scanCode',
								});
							}
						},
						fail: error => {},
					});
				}, 1500);
			},
			refresh() {
				this.refreshFlag = true
				this.showMask = false
				this.getCode()

				setTimeout(() => {
					this.refreshFlag = false
				}, 1000 * 60 * 3)
			},
			// 跳轉到手機登錄頁面
			handPhone() {
				clearInterval(this.codeTimer);
				// uni.navigateTo({
				// 	url: "/pages/login/login"
				// })
				uni.reLaunch({
					url: "/pages/login/login"
				})
				// console.log("手機登錄");
			},
			handregister() {
				clearInterval(this.codeTimer);
				uni.navigateTo({
					url: "/pages/register/register"
				})
				console.log("注冊");
			},
			back() {
				clearInterval(this.codeTimer);
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.menu {
		height: 100%;

		.img_box {
			// padding: 40rpx 40rpx 0;
			position: relative;

			.back {
				position: fixed;
				left: 10rpx;
				bottom: 30rpx;
				display: flex;
				align-items: center;
				color: #fff;
				background-color: #ff914d;
				padding: 5rpx 10rpx;
				border-radius: 20rpx;

				image {
					width: 50rpx;
					margin-right: 10rpx;
				}
			}
		}

		.main {
			padding: 40rpx 40rpx 0;
			text-align: center;
			color: #39B19D;

			.title {
				font-size: 36rpx;
			}

			.sd_title {
				height: 100rpx;
				line-height: 100rpx;
				font-size: 50rpx;
			}

			.scan_img {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				::v-deep .u-transition {
					width: 250rpx !important;
					height: 250rpx !important;
					align-items: center !important;
				}

				::v-deep .u-image {
					// width: 300rpx !important;
					// height: 300rpx !important;
				}

				.mask {
					width: 250rpx;
					height: 250rpx;
					background-color: #000000c7;
					// opacity: 0.5;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;

					image {
						width: 80rpx;
					}

					.active {
						animation: scan-refresh 0.5s infinite linear;
					}

					@keyframes scan-refresh {
						from {
							transform: rotate(0);
						}

						to {
							transform: rotate(360deg);
						}
					}
				}
			}

			.form {
				position: relative;
				padding-bottom: 120rpx;

				.input {
					border: 2rpx solid #39B19D;
				}

				.input:focus {
					border: 2rpx solid #39B19D;
				}

				.input:focus {
					border: 2rpx solid #39B19D;
				}

				.user_name {
					margin-bottom: 20rpx;
				}

				.checkout_btn {
					position: absolute;
					right: 20rpx;
					bottom: 60rpx;
					font-size: 24rpx;
				}
			}

			.btn_wrap {
				display: flex;
				justify-content: space-around;

				.btn_box {
					width: 140rpx;
					padding: 10rpx;
					text-align: center;
					border-radius: 10rpx;
					color: #fff;
					background-color: #39B19D;
				}
			}

			.deal {
				padding: 80rpx 20rpx 20rpx;
				font-size: 24rpx;

				::v-deep .uni-checkbox-input {
					border-color: #39B19D;
					border-radius: 50%;
					vertical-align: middle;
				}

				.text {
					vertical-align: middle;
				}
			}

			.footer {
				margin-top: 50rpx;
				display: flex;
				flex-direction: row;

				.btnpho {
					background-color: #39B19D;
					width: 200px;
					color: #fff;
					font-size: 36rpx;
				}
			}
		}
	}
</style>